<template>
	<view class="container">
		<!-- 动作选项列表 -->
		<view class="action-list">
			<view 
				class="action-card" 
				v-for="(item, index) in actionOptions" 
				:key="index"
				:class="{ 'selected': selectedIndex === index }"
				@click="selectAction(index)"
			>
				<image class="action-image" :src="item.image" mode="aspectFill"></image>
				<view class="action-info">
					<text class="action-title">{{ item.title }}</text>
					<view class="sets-input">
						<text class="sets-label">组数：</text>
						<input 
							type="number" 
							v-model="item.sets" 
							placeholder="请输入组数"
							class="sets-field"
							@click.stop
							@focus="selectAction(index)"
						/>
						<text class="sets-unit">组</text>
					</view>
					<view class="sets-input">
						<text class="sets-label">时间：</text>
						<input 
							type="number" 
							v-model="item.duration" 
							placeholder="请输入时间"
							class="sets-field"
							@click.stop
							@focus="selectAction(index)"
						/>
						<text class="sets-unit">秒</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button 
				class="btn-add" 
				type="default" 
				:disabled="!canAdd"
				@click="addAction"
			>
				<text class="btn-icon">+</text>
				<text class="btn-text">添加动作</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actionOptions: [
					{ title: '杠铃卧推', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '哑铃肩推', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '俯卧撑', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '绳索下压', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '上斜哑铃卧推', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '引体向上', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '坐姿划船', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '杠铃划船', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '哑铃弯举', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '面拉', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '深蹲', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '硬拉', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '弓步蹲', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '腿举', sets: '', duration: 300, image: '/static/logo.png' },
					{ title: '平板支撑', sets: '', duration: 300, image: '/static/logo.png' }
				],
				selectedIndex: -1 // 当前选中的动作索引
			}
		},
		computed: {
			// 是否可以添加动作
			canAdd() {
				if (this.selectedIndex === -1) return false;
				const selectedAction = this.actionOptions[this.selectedIndex];
				return selectedAction && 
				       selectedAction.sets && selectedAction.sets > 0 &&
				       selectedAction.duration && selectedAction.duration > 0;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择动作
			selectAction(index) {
				this.selectedIndex = index;
			},
			// 添加动作
			addAction() {
				if (!this.canAdd) {
					uni.showToast({
						title: '请先选择动作并输入组数和时间',
						icon: 'none'
					});
					return;
				}
				
				const selectedAction = this.actionOptions[this.selectedIndex];
				const newAction = {
					name: selectedAction.title,
					sets: parseInt(selectedAction.sets),
					duration: parseInt(selectedAction.duration)
				};
				
				// 获取现有的workout列表
				let workoutList = uni.getStorageSync('workoutList') || [];
				workoutList.push(newAction);
				uni.setStorageSync('workoutList', workoutList);
				
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 240rpx;
	}
	
	/* 动作列表 */
	.action-list {
		padding: 30rpx;
	}
	
	.action-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 3rpx solid transparent;
		transition: all 0.3s ease;
	}
	
	.action-card.selected {
		border-color: #52C41A;
		background-color: #F6FFED;
	}
	
	.action-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		background-color: #F0F0F0;
		flex-shrink: 0;
	}
	
	.action-info {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}
	
	.action-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 12rpx;
	}
	
	.sets-input {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
	}
	
	.sets-label {
		font-size: 26rpx;
		color: #666666;
	}
	
	.sets-field {
		flex: 1;
		max-width: 120rpx;
		height: 56rpx;
		background-color: #F5F5F5;
		border-radius: 8rpx;
		padding: 0 16rpx;
		font-size: 28rpx;
		color: #333333;
		margin: 0 8rpx;
	}
	
	.sets-unit {
		font-size: 26rpx;
		color: #666666;
	}
	

	
	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #F5F5F5;
		padding: 30rpx;
		z-index: 999;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
	}
	
	/* 小程序端特殊处理，确保完全不透明 */
	/* #ifdef MP-WEIXIN */
	.bottom-actions {
		background-color: #F5F5F5;
		/* 使用伪元素添加额外的背景层 */
	}
	
	.bottom-actions::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #F5F5F5;
		z-index: -1;
	}
	/* #endif */
	
	.btn-add {
		width: 100%;
		height: 96rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		background-color: #52C41A;
		color: #FFFFFF;
	}
	
	.btn-add[disabled] {
		background-color: #D9D9D9;
		color: #FFFFFF;
		opacity: 0.6;
	}
	
	.btn-add::after {
		border: none;
	}
	
	.btn-icon {
		font-size: 40rpx;
		margin-right: 12rpx;
		font-weight: normal;
	}
	
	.btn-emoji {
		font-size: 36rpx;
		margin-right: 12rpx;
	}
	
	.btn-text {
		font-size: 32rpx;
	}
</style>
